import { addNewContent } from '@/services/evaluate';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import { Button, Form, Input, message, Modal, Rate } from 'antd';
import styles from '../index.less';

type Props = {
  visible: boolean;
  handleCancel: () => void;
  info: any;
  getListCurr: () => void;
};

const CreateEvaluate: React.FC<Props> = ({ visible, handleCancel, getListCurr, info }) => {
  //   const qs = getQueryParams();
  const [form] = Form.useForm();
  const { TextArea } = Input;
  const colorThem = localStorage.getItem('color') || '#1a7721';

  const customIcons: Record<number, React.ReactNode> = {
    1: <FrownOutlined style={{ fontSize: 14 }} />,
    2: <FrownOutlined style={{ fontSize: 14 }} />,
    3: <MehOutlined style={{ fontSize: 14 }} />,
    4: <SmileOutlined style={{ fontSize: 14 }} />,
    5: <SmileOutlined style={{ fontSize: 14 }} />,
  };

  const submitEvaluate = async (values: any) => {
    await addNewContent({
      orderid: info.orderId,
      state: '5',
      star: values.star,
      companyid: info.companyid,
      userid: info.userid,
      username: info.username,
      goodsId: info.goodsId,
      usercontent: values.usercontent,
    }).then(() => {
      message.success('评价成功！');
      handleCancel();
      getListCurr();
      form.resetFields();
    });
  };

  const onFinish = async () => {
    let values = await form.validateFields();

    Modal.confirm({
      content: '确定评价吗？',
      okText: '确认',
      centered: true,
      cancelText: '取消',
      onOk: () => submitEvaluate(values),
    });
  };

  return (
    <Modal
      visible={visible}
      onCancel={() => {
        handleCancel();
        form.resetFields();
      }}
      footer={[
        <>
          <Button
            onClick={() => {
              handleCancel();
              form.resetFields();
            }}
            className={styles.btnCancel}
          >
            取消
          </Button>
          <Button
            className={styles.btnSeal}
            style={{ background: `${colorThem}`, width: 120, color: '#fff' }}
            htmlType="submit"
            type="primary"
            onClick={onFinish}
          >
            新建
          </Button>
        </>,
      ]}
      closable={false}
      className={styles.modalsStyle}
      width={580}
      title={'新建优惠券'}
      centered={true}
    >
      <div className={styles.modalContent}>
        <Form
          className={styles?.formStyle}
          onFinish={onFinish}
          form={form}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 28 }}
        >
          <Form.Item
            label="评价星级"
            name="star"
            validateTrigger="onBlur"
            rules={[
              {
                required: true,
                message: (
                  <div>
                    <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                    请输入评价星级
                  </div>
                ),
              },
            ]}
          >
            <Rate character={({ index }: any) => customIcons[index + 1]} />
          </Form.Item>
          <Form.Item
            label="评价内容"
            name="usercontent"
            rules={[
              {
                required: true,
                message: (
                  <div>
                    <img src={require('@/assets/images/error.png')} width={14} alt="错误" />
                    请输入评价内容
                  </div>
                ),
              },
            ]}
          >
            <TextArea
              maxLength={300}
              placeholder={'请输入您的评价...'}
              autoSize={{ minRows: 9, maxRows: 9 }}
              showCount
            />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

export default CreateEvaluate;
